<template>
  <div id="app">
    <Header notab="job"/>
    <div class="contentWeb">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="detailCrumb">
        <el-breadcrumb-item>找工作</el-breadcrumb-item>
        <el-breadcrumb-item>职位详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="jobdtab">
        <div class="clear">
          <div class="zwname">{{position.positionName}}</div>
        </div>
        <div class="clear" style="padding: 10px 0" @click="toJob(position.enterpriseUid)">
          <div class="gsname">{{position.companyName}}</div>
          <div class="look">查看所有职位</div>
        </div>
        <div class="jieshao">
          <span>{{position.saveCity}}</span>
          <span>{{position.experience}}经验</span>
          <span>{{position.educational}}</span>
          <span>招募{{position.zprs}}人</span>
        </div>
        <div class="clear" v-html="welfareRemarkhtml(position.welfareRemark)" style="max-width:850px">
        </div>
        <div v-if="showSQBtn" class="btnstyle">
          <div class="soucang" v-if="position.isCollection == 2">
            <div class="tnm"  @click="myCollection(position)">收藏</div>
          </div>
          <div class="soucang" style="background: #F6F6F8;border: 1px solid #F6F6F8;color:#ddd;" v-else>
            <div class="tnm">已收藏</div>
          </div>
          <div class="btnshenqing" style="background: #F6F6F8;border: 1px solid #F6F6F8;color:#ddd;" v-if="position.isApply == 1">已申请职位</div>
          <div class="btnshenqing" @click="shenqing(position)" v-else>申请职位</div>

        </div>
        <div class="jprice">
          <b>{{position.wageRange}}</b>
        </div>
      </div>
      <div class="jutinr">
        <div class="qanhuiqiye">工作职责</div>
        <div class="ddk" v-html="position.positionDuty">
        </div>
        <div class="qanhuiqiye">任职资格</div>
        <div class="ddk" v-html="position.qualifications">

        </div>

        <div class="qanhuiqiye">工作地址</div>
        <div class="ddk">
          {{position.address}}
        </div>
        <div class="qanhuiqiye">企业信息</div>
        <div class="ddk">
          <div class="logosub clear">
            <div class="logo"><img :src="companyinfo.logo" alt=""></div>
            <div class="cname">
              <h2>{{companyinfo.name}}</h2>
              <div class="mss"><span>{{companyinfo.industry}}</span><span>{{companyinfo.enterpriseNature}}</span> <span>{{companyinfo.companySize}}</span></div>
            </div>
            <div class="detail_con"></div>
          </div>
          <div>
            {{companyinfo.introduction}}
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Header from '../../components/header'
import Footer from '../../components/footer'
import { Position, GetUrlParam, addToMyCollection, applyPositionMy, EnterpriseLibByUid } from '../../assets/js/domains'

export default {
  name: 'Job',
  components: { Header, Footer },
  directives: {},
  data: function () {
    return {
      showSQBtn: true, // 个人可以收藏，申请，企业不可以
      position_id: 0,
      position: {},
      companyinfo: {},
      serach: { position_id: '', userUid: '' }
    }
  },
  created: function () {
    document.title = '找工作'
    this.showSQBtn = localStorage.getItem('shenfen') == 2
  },
  computed: {},
  mounted: function () {
    this.position_id = GetUrlParam('id')
    if (this.position_id) {
      this.getpost()
    }
  },
  methods: {
    welfareRemarkhtml: function (item) {
      if (item) {
        const mp = item.split(',')
        let htmls = ''
        for (let i = 0; i < mp.length; i++) {
          htmls = htmls + ' <div style="height: 36px;line-height: 34px;background: #f6f6f8;border: 1px solid #f6f6f8;border-radius: 6px;padding: 0 15px;font-size: 16px;float: left;margin-right: 10px;margin-top: 5px;">' + mp[i] + '</div>'
        }

        return htmls
      } else {
        return ''
      }
    },
    getEnterpriseLibByUid: function (id) {
      const _this = this
      EnterpriseLibByUid({ enterprise_uid: id, userUid: this.serach.userUid }).then(function (res) {
        if (res.code === 200) {
          _this.companyinfo = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    getpost: function () {
      const _this = this
      _this.serach.position_id = this.position_id
      var userUid = localStorage.getItem('md_user_uid') ? localStorage.getItem('md_user_uid') : ''
      _this.serach.userUid = userUid
      Position(_this.serach).then(function (res) {
        if (res.code === 200) {
          _this.position = res.data
          _this.getEnterpriseLibByUid(res.data.enterpriseUid)
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    toJob: function (id) {
      window.location.href = 'companyDetail.html?enterpriseUid=' + id
    },
    myCollection (item) {
      const _this = this
      const userUid = localStorage.getItem('md_user_uid')
      if (!userUid) {
        this.$message.warning('请先登录')
        return false
      }
      addToMyCollection({
        positionId: item.id,
        userUid: userUid,
        enterpriseUid: item.enterpriseUid,
        positionName: item.positionName,
        educational: item.educational,
        zprs: item.zprs,
        logo: item.logo,
        companyName: item.companyName,
        industry: item.industry,
        enterpriseNature: item.enterpriseNature,
        companySize: item.companySize,
        wageRange: item.wageRange,
        experience: item.experience,
        address: item.address,
        welfareRemark: item.htyhty,
        positionInfo: item.welfareRemark,
        name: item.name,
        sex: item.sex,
        age: item.age,
        education: item.education,
        homeAddress: item.homeAddress
      }).then(function (res) {
        if (res.code === 200) {
          _this.position.isCollection = 1
          _this.$message.success('收藏成功')
        } else {
          _this.$message.error('收藏失败')
        }
      })
    },
    shenqing (item) {
      if (!this.curUserInfo.userUid) {
        this.$message.warning('请先登录！')
        return
      }
      if (!this.curUserInfo.approval || this.curUserInfo.approval != 2) {
        this.$message.warning('用户未通过审核，不能申请职位')
        return
      }
      if (this.curUserInfo.jlzt != 1) {
        this.$message.warning('简历异常，请完善简历')
        return
      }
      const _this = this
      applyPositionMy({
        positionId: item.id,
        userUid: this.curUserInfo.userUid,
        enterpriseUid: item.enterpriseUid,
        positionName: item.positionName,
        educational: item.educational,
        applyState: 5,
        laiYuan: '电脑端',
        zprs: item.zprs,
        logo: item.logo,
        companyName: item.companyName,
        industry: item.industry,
        enterpriseNature: item.enterpriseNature,
        companySize: item.companySize,
        wageRange: item.wageRange,
        experience: item.experience,
        address: item.address,
        welfareRemark: item.htyhty,
        positionInfo: item.welfareRemark,
        name: item.name,
        sex: item.sex,
        age: item.age,
        education: item.education,
        homeAddress: item.homeAddress
      }).then(function (res) {
        if (res.code === 200) {
          _this.position.isApply = 1
          _this.$message({
            message: '申请成功',
            type: 'success'
          })
        } else {
          _this.$message.error('申请失败')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/jobDetail";
</style>
